import {PlusOutlined,QuestionCircleOutlined} from '@ant-design/icons';
import { useAppDispatch, useAppSelector } from '../../store/hooks';
import { Button, Divider, Form, Input, Modal, Select, Table, Image } from 'antd';
import React, { useEffect, useState } from 'react'
import { IOrganization, addMember } from '../../store/features/globalSlice';
import Logo from '../../images/Logo.png'

const { Option } = Select

const columns = [
    {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        render: (value: string) => { return value },
        width: '30%',
    },
    {
        title: 'Email',
        dataIndex: 'email',
        key: 'email',
        render: (value: string) => { return value },
        width: '40%',
    },
    {
        title: 'Permissions',
        dataIndex: 'permissions',
        key: 'permissions',
        render: (value: string) => {
            return (
                <Select defaultValue={value} bordered={false}>
                <Option value="owner">owner</Option>
                <Option value="lv1">lv1</Option>
                <Option value="lv2">lv2</Option>
            </Select>
            )
        },
        width: '30%',
    },
]

interface IProps {
    id: number
}

const Detail: React.FC<IProps> = (props) => {
    const { id } = props
    const { list } = useAppSelector((state) => state.global)
    const dispatch = useAppDispatch()
    const [isModalVisible, setIsModalVisible] = useState<boolean>(false)
    const [form] = Form.useForm()

    const handleAdd = () => {
        const data = {
            id: id,
            member: {
                name: form.getFieldsValue().name,
                email: form.getFieldsValue().email,
                permissions: form.getFieldsValue().permissions
            }
        }
        dispatch(addMember(data))
        setIsModalVisible(false)
    }

    return (
        <div>
            <h1 className="orgName">{list.find((item: IOrganization) => item.id === id)?.name}</h1>
            <Divider />
            <div className="org-pannel">
                <div className="subtitle">Status</div>
                <div className="status">Private <QuestionCircleOutlined /></div>
                <div className="logo">
                    <Image src={Logo} width={60} style={{borderRadius: '50%'}} />
                    <div className="change-logo">Change Logo</div>
                </div>
            </div>
            <div className="subtitle">Members</div>
            <Table columns={columns} dataSource={list.find((item: IOrganization) => item.id === id)?.memberList} pagination={false} />
            <div className="side-add-button">
                <Button style={{ marginTop: 20 }} type="text" icon={<PlusOutlined />} onClick={() => {setIsModalVisible(true)}}>Add Member</Button>
            </div>
            <Modal title="Creat New Organization" visible={isModalVisible} onOk={handleAdd} onCancel={() => { setIsModalVisible(false) }}>
                <Form form={form}>
                    <Form.Item name="name" label="Name">
                        <Input></Input>
                    </Form.Item>
                    <Form.Item name="email" label="Email">
                        <Input></Input>
                    </Form.Item>
                    <Form.Item name="permissions" label="Permissions" initialValue="owner">
                        <Select allowClear>
                            <Option value="owner">owner</Option>
                            <Option value="lv1">lv1</Option>
                            <Option value="lv2">lv2</Option>
                        </Select>
                    </Form.Item>
                </Form>
            </Modal>
        </div>

    )
}

export default Detail;